<template>
  <div class="format-font">
    <Modal v-model="appnameActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + 'Appname'" width="650">
      <el-form ref="form" :model="newAppnameForm" label-width="130px">
        <el-form-item label="主机名称" prop="host" size="small">
          <el-input v-model="newAppnameForm.host" placeholder="请输入主机名称" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="ip" size="small">
          <el-input v-model="newAppnameForm.ip" placeholder="请输入主机IP" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="Service Name" prop="service_name" size="small">
          <el-input v-model="newAppnameForm.serviceName" placeholder="请输入Service Name" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="集群" prop="clusterId" size="small" style="width: 400px">
          <el-select
            v-model="newAppnameForm.clusterId"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in clustersList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="type" size="small" style="width: 400px">
          <el-select
            v-model="newAppnameForm.type"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in appnameTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SSH用户名" prop="sshUser" size="small">
          <el-input v-model="newAppnameForm.sshUser" placeholder="请输入SSH用户" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="SSH密码" prop="sshPassword" size="small">
          <el-input v-model="newAppnameForm.sshPassword" placeholder="请输入SSH密码" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="SSH端口" prop="sshPort" size="small">
          <el-input v-model="newAppnameForm.sshPort" placeholder="请输入SSH端口" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="Charset" prop="Charset" size="small">
          <el-input v-model="newAppnameForm.Charset" placeholder="请输入Charset" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="软件安装位置" prop="location" size="small">
          <el-input v-model="newAppnameForm.location" placeholder="请输入软件默认安装位置" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="备注信息" prop="comment" size="small">
          <el-input v-model="newAppnameForm.comment" placeholder="请输入备注信息" style="width: 400px" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}Appname信息</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createAppname, updateAppname } from '@/api/appid/appname'
import { errorNotify } from '@/libs/util'

export default {
  name: 'AppnameAction',
  props: {
    appnameActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    appnameInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      AppnameForm: {},
      clustersList: [],
      newAppnameForm: {
        clusterId: ''
      },
      appnameTypeChoice: [
        {
          value: '2u',
          lable: '2u'
        },
        {
          value: '4u',
          lable: '4u'
        },
        {
          value: 'ibm',
          lable: 'ibm'
        }
      ]
    }
  },
  mounted() {
    this.setInitModelInfo()
  },
  methods: {
    cancel() {
      this.$emit('on-appname-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.actionAppnameInfo()
        } else {
          return false
        }
      })
    },
    async actionAppnameInfo() {
      const params = this.newAppnameForm
      try {
        if (this.action.type === 'update') {
          const { data } = await updateAppname(this.newAppnameForm.id, snakeCaseObject(params))
          this.$emit('on-appname-change', { type: this.action.type, status: false, appnameId: data.id })
        } else if (this.action.type === 'create') {
          const { data } = await createAppname(snakeCaseObject(this.newAppnameForm))
          this.$emit('on-appname-change', { type: this.action.type, status: false, appnameId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newAppnameForm = this.$lodash.cloneDeep(this.appnameInfo)
    }
  }
}
</script>

<style scoped>
</style>
